<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style type="text/css">
			.wrap {
				margin: 0 auto;
				width: 500px;
				height: 500px;
				border: 1px solid black;
				position: relative;
			}
			.inner {
				width: 350px;
				height: 350px;
				background-color: #CCCCCC;
				position: absolute;
				left: 0;
				right:0;
				top:0;
				bottom:0;
				margin: auto;
			}
			/* .item {
				width: 400px;
				height: 400px;
				background-color: #00FF00;
				list-style: none;
				position: relative;
			} */
		</style>
	</head>
	<body>
		<!-- 定 位  position
		 相对定位：relative
		 定位以后不脱离文档流，他原来在文档里位置不丢失
		 定位的基准：基准就是他原来自己的位置
		 position:relative
		 配合定位的四个属性 top bottom left right
		 相对定位可以作为绝对定位的基准。
		 绝对定位：
		 定位以后脱离文档流，他原来在文档里位置丢失
		 理解成浮动起来了，它本身的层级也会提高
		 定位的基准：
		 1、他会在父元素中逐级向外去寻找，找有没有设置相对定位或者绝对定位,如果找到了，就会以找到的元素作为定位的基准
		 2、没找到，根据我们浏览器窗口进行定位
		 position:absolute
		 配合定位的四个属性 top bottom left right 可以给负值，负值就是想相反的方向移动
		 如果不设置高度或者宽度，可以根据上面这四个值获取宽高度
		 利用绝对定位来居中
		 1、不设置子元素宽高，然后可以设置他的四个边的距离一样，使元素居中
		 2、设置了元素宽高度，可以设置四个值都为0，然后加上margin：auto
		 -->
		 <div class="wrap">
			<div class="inner"></div>
		 </div>
	</body>
</html>
